<!DOCTYPE html>
<html>
<head>
	<title>事件流</title>
	<meta charset="utf-8">
	<!-- <style>
        .box{
            width:350px;
            padding:50px;
            background-color:red;
        }
        .con{
            padding:50px;
            background-color:green;
        }
        .list{
            padding:50px;
            background-color:blue;
        }
        p{
            padding:50px;
            background-color:pink;
        }
        span{
            display: block;
            padding:30px;
            background-color:#fff;
        }
    </style> -->
    <!-- 事件委托 -->
   <!--  <style>
        .box{
            width:200px;
            height:auto;

        }
        .box .list{
            height:40px;
            line-height:40px;
            margin-bottom: 20px;
            background-color:yellow;
        }
    </style> -->
    <!-- 阻止冒泡事件 -->
 <style>
        .box{
            width:300px;
            height:300px;
            padding:40px;
            background-color:red;
        }
        .con{
            padding:40px;
            background-color:blue;
        }
        p{
            padding:40px;
            background-color:orange;
        }
        span{
            display: block;
            padding:40px;
            background-color:green;
        }
    </style> 
</head>
<body>
 事件流：
    分三个阶段：捕获，目标，冒泡
    目标阶段：目标元素就是事件源，事件源上的捕获和冒泡是谁写在前面就先执行谁。事件源上的事件是按顺序执行的。

冒泡
    概念：
        对于相互嵌套的元素，从结构上（非视觉上）从点击的元素开始向上查找是否存在相同的事件（不是所有的事件），如果存在，就会发生冒泡
捕获：
    概念：
        对于相互嵌套的元素，从结构上（非视觉上）从顶端的元素开始向下查找是否存在相同的事件（不是所有的事件），直到点击的元素为止，如果存在，就会发生捕获
    IE上没有


事件委托：
    概念：通过给一个元素添加事件，来管理一类元素的事件。
    原理：
        1.利用了冒泡事件的原理
        2.利用了事件源来查找当前点击的对象
    优势：
        1.提高效率

e=e||window.event;
阻止冒泡
    W3C:e.stopPropagation() IE9及IE9以上
    ie :e.cancelBubble=true; 谷歌已经实现

    封装阻止冒泡的兼容方法

阻止默认事件：一般用于a标签和表单提交
    return false;
    e.preventDefault();  //IE9及IE9以上
    e.returnValue=true;//IE独有

    封装阻止默认事件方法： -->
<!-- <div class="box">
    <div class="con">
        <div class="list">
            <p>
                <span>

                </span>
            </p>
        </div>
    </div>
</div> -->
<!-- 事件委托 -->
<!-- <div class="box">
    <div class="list">2</div>
    <div class="list">3</div>
    <div class="list">4</div>
</div> -->
<!-- 阻止冒泡 -->
<div class="box" id="box">
    <div class="con" id="con">
        <p>
            <span>

            </span>
        </p>
    </div>
</div>
<!-- 阻止默认事件 -->
<a href="javascript:void(0)">百度</a><br>
<a href="http://www.qq.com" >腾讯</a>
 <script>
    var box=document.getElementsByClassName("box")[0];
    var con=document.getElementsByClassName("con")[0];
    var list=document.getElementsByClassName("list")[0];
    var p=document.getElementsByTagName("p")[0];
    var span=document.getElementsByTagName("span")[0];


    box.addEventListener("click",function(){
        console.log("Mred");
    })
    con.addEventListener('click',function(){
        console.log("Mgreen");
    })
    list.addEventListener('click',function(){
        console.log("Mblue");
    })
    p.addEventListener('click',function(){
        console.log("Mpink");
    })
    span.addEventListener('click',function(){
        console.log("M#fff");
    })

    // document.addEventListener('click',function(){
    //     console.log("M-document");
    // })



    box.addEventListener("click",function(){
        console.log("Bred");
    }, true)
    con.addEventListener('click',function(){
        console.log("Bgreen");
    },true)
    list.addEventListener('click',function(){
        console.log("Bblue");
    },true)
    p.addEventListener('click',function(){
        console.log("Bpink");
    },true)
    span.addEventListener('click',function(){
        console.log("B#fff");
    },true)

    // document.addEventListener('click',function(){
    //     console.log("B-document");
    // },true)

</script> 

<!-- <script>
    var box=document.getElementsByClassName("box")[0];
    box.onclick=function(e){
        e=e||window.event;
        target=e.target||e.srcElement;
        console.log(target.innerHTML);
    }
    // var list=box.getElementsByClassName("list");
    // for(var i=0;i<list.length;i++){
    // 	list[i].onclick=function(){
    // 		console.log(this.innerHTML);
    // 	}
    // }
    var divNew=document.createElement("div");
    divNew.className="list";
    divNew.innerHTML="5";
    box.appendChild(divNew);
</script> -->

<!-- <script>
    var div=document.getElementById("box"),
        con=document.getElementById("con"),
        p=con.getElementsByTagName("p")[0],
        span=p.getElementsByTagName("span")[0];

    div.onclick=function(){
        console.log("red");
    }
    con.onclick=function(){
        console.log("blue");
    }
    p.onclick=function(e){
        e=e||window.event;
        stopBubble(e);
        // e.stopPropagation();
        console.log("orange");
    }
    span.onclick=function(e){
        e=e||window.event;
        stopBubble(e);
        // e.stopPropagation();
        console.log("green");
    }


    function stopBubble(e){
        if(e.stopPropagation){
            return e.stopPropagation();
        }else{
            return e.cancelBubble=true;
        }
    }

</script> -->

<script>
// 	function test(a){
// 	    var e=window.event||arguments.callee.caller.arguments[0];
// 	    e.preventDefault();
// 	    a.style.backgroundColor="red";
// 	}
// //
	// var tenxun=document.getElementsByTagName("a")[1];
	// tenxun.onclick=function(e){
	//     e=e||window.event;
	//     e.preventDefault();
	//     // e.returnValue=true;
	//     this.style.backgroundColor="red";
	//     // return false;

	// }

	// function cancelDefault(e){
	//     if(e.preventDefault){
	//         return e.preventDefault();
	//     }else{
	//         return e.returnValue=true;
	//     }
	// }
</script>
</body>
</html>